<template>
  <div>
    <div class="mt-5">
      <a-form layout="inline" :model="searchForm">
        <!-- <a-form-item label="供热年度">
          <a-date-picker
            style="width: 200px"
            v-model:value="searchForm.year"
            picker="year"
            format="YYYY"
          />
        </a-form-item> -->
        <a-form-item label="热力卡号">
          <a-input style="width: 200px" v-model:value="searchForm.alipayConsNo" />
        </a-form-item>
        <a-form-item label="住户名称">
          <a-input style="width: 200px" v-model:value="searchForm.holder" />
        </a-form-item>
        <a-form-item>
          <a-button type="primary" :icon="h(SearchOutlined)" @click="onSearch">查询应收账单</a-button>
        </a-form-item>
        <!-- <a-form-item>
          <a-button type="primary" :icon="h(CodeSandboxOutlined)"
            >合并缴费</a-button
          >
        </a-form-item> -->
      </a-form>
    </div>
    <a-table :columns="columns" :data-source="dataSource" :row-class-name="(_record: any, index: number) =>
      index % 2 === 1 ? 'table-striped' : null
      " :pagination="pagination" bordered class="mt-5">
      <template #footer>合计</template>
    </a-table>
  </div>
</template>
<script setup lang="ts">
import { reactive, ref, h } from "vue";
import { SearchOutlined } from "@ant-design/icons-vue";
import { getReceivableOrDerateApi } from "#/api/core/charge";
import { message } from 'ant-design-vue'

const searchForm = reactive({
  // year: "",
  alipayConsNo: "",
  holder: "",
});
const props = defineProps({
  selectedNodeId: {
    type: Array,
    default: [],
  },
});
const pagination = reactive({
  total: 0,
  pageSize: 10,
  current: 1,
  showSizeChanger: true,
  showQuickJumper: true,
  showTotal: (total: number) => `共 ${total} 条`,
  onChange: (page: number, pageSize: number) => {
    pagination.current = page;
    pagination.pageSize = pageSize;
    onSearch();
  },
});
const dataSource = ref([]);
const columns = [
  {
    title: "小区名称",
    dataIndex: "village",
    key: "village",
    align: "center",
    // width: 80,
  },
  {
    title: "用户地址",
    dataIndex: "houseAddress",
    key: "houseAddress",
    align: "center",
    // width: 80,
  },
  {
    title: "用户姓名",
    dataIndex: "holder",
    key: "holder",
    align: "center",
    // width: 50,
  },
  {
    title: "热力卡号",
    dataIndex: "alipayConsNo",
    key: "alipayConsNo",
    align: "center",
    // width: 80,
  },
  {
    title: "收费期",
    dataIndex: "year",
    key: "year",
    align: "center",
    // width: 80,
  },
  {
    title: "减免日期",
    dataIndex: "derateTime",
    key: "derateTime",
    align: "center",
    // width: 80,
  },
  {
    title: "减免类型",
    dataIndex: "derateType",
    key: "derateType",
    align: "center",
    // width: 80,
  },
  {
    title: "减免类别",
    dataIndex: "derateCategory",
    key: "derateCategory",
    align: "center",
    // width: 80,
  },
  {
    title: "减免方式",
    dataIndex: "derateWay",
    key: "derateWay",
    align: "center",
    // width: 80,
  },
  {
    title: "减免值",
    dataIndex: "derateNumber",
    key: "derateNumber",
    align: "center",
    // width: 80,
  },
  {
    title: "减免金额",
    dataIndex: "derateMoney",
    key: "derateMoney",
    align: "center",
  }
  // {
  //   title: "开始供热日期",
  //   dataIndex: "",
  //   key: "",
  //   align: "center",
  //   width: 120,
  // },
  // {
  //   title: "协议价格",
  //   dataIndex: "",
  //   key: "",
  //   align: "center",
  //   width: 100,
  // },
];
const onSearch = async () => {
  if (props.selectedNodeId.length === 0) {
    message.error('请选择左侧树结构！');
    return;
  } else {
    const res = await getReceivableOrDerateApi({
      page: pagination.current,
      limit: pagination.pageSize,
      treeData: props.selectedNodeId,
      ...searchForm,
      type: 0,
    });
    dataSource.value = res.data;
    pagination.total = res.total;
  }

};
</script>
<style scoped></style>
